<style scoped lang="scss">
.bigBox {
  width: 100vw; // 100vw * 0.5 = 50vw
  height: 100vh; // 100vh * 0.5 = 50vh
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;

  header {
    width: 100%;
    height: 50px; // 100px * 0.5 = 50px
    margin-bottom: 5px; // 10px * 0.5 = 5px
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .header-left {
      margin-left: 20px; // 20px * 0.5 = 10px
    }

    .header-center {
      margin-right: 10px; // 20px * 0.5 = 10px

      p {
        font-size: 13px; // 26px * 0.5 = 13px
      }
    }
  }

  main {
    width: 100%;
    flex: 1;
    background-image: url(../../assets/images/image/hdpi/invitation_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    // background-image: url(../../assets/images/image/hdpi/invitation_white_bg.png);
    // background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    .invite-box {
      width: 88%;
      height: 94%;
      margin-top: 12px;
      background-image: url(../../assets/images/image/hdpi/invitation_white_bg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      .inviteBox_top {
        width: 50%;
        height: 160px;
        margin-top: -30px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        p {
          font-size: 14px;
        }
        .invitema {
          width: 90%;
          height: 60px;
          display: flex;
          justify-content: center;
          align-items: center;
          input {
            width: 100%;
            height: 30px;
            border: none;
            background-color: #f2f2f2;
            text-align: center;
          }
        }
        button {
          padding: 6px 10px;
          background-color: #fff;
          text-decoration: underline;
          border: none;
          color: skyblue;
          font-size: 14px;
        }
      }
      .inviteBox_bot {
        width: 76%;
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        .erweima {
          width: 140px;
          height: 140px;
          background-color: pink;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .textCon{
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .onButton{
          width: 100%;
          display: flex;
          justify-content: center;
          button{
            padding: 6px 60px;
            background-color: #3087ea;
            border: none;
            color: #fff;
            border-radius: 6px;
          }
        }
      }
    }
  }
}
</style>

<template>
  <div class="bigBox">
    <header>
      <div class="header-left">
        <img @click="onClickLeft" src="@/assets/back_black.png" alt="" />
      </div>
      <div class="header-center">
        <p>邀请好友</p>
      </div>
      <div class="header-right"></div>
    </header>
    <main>
      <div class="invite-box">
        <div class="inviteBox_top">
          <p>你的邀请码</p>
          <div class="invitema">
            <input ref="copyInput" type="text" v-model="textToCopy" />
          </div>
          <button @click="copyText">复制邀请码</button>
        </div>
        <div class="inviteBox_bot">
          <canvas style="width: 140px;height: 140px;" ref="qrCanvas"></canvas>
          <div class="textCon">
            <p>邀请好友下载APP</p>
            <p>注册填写上方邀请码，双方可分别获得300H币</p>
          </div>
          <div class="onButton">
            <button>邀请好友</button>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
import QRCode from 'qrcode'

const qrCanvas = ref(null)
const text = '内容'

onMounted(() => {
  QRCode.toCanvas(qrCanvas.value, text, error => {

  })
})

const textToCopy = ref('DZFPVIZEO')

const copyText = () => {
  navigator.clipboard.writeText(textToCopy.value).then(() =>
    ElMessage({
      message: '复制成功',
      type: 'success',
    }),
  )
}

const onClickLeft = () => history.back()
</script>
